<!doctype html>
<html>

<head>
    <meta charset=utf-8>
    <link rel="icon shortcut" href=images/logo.png type=image/png>
    <link rel=apple-touch-icon href=images/logo.png>
    <link rel=stylesheet href=lib/bootstrap-4.0.0-dist/css/bootstrap.min.css>
    <link rel=stylesheet href=lib/prismjs-1.13.0/prism.css>
    <link rel=stylesheet href=css/base.css>
    <link rel=stylesheet href=css/ui-block.css>
    <link rel=stylesheet href=css/codemirror.css>
    <meta name=viewport content="width=device-width">
    <title>NEBULAS</title>
    <style>
        #content {
            border-top: 1px solid;
        }

        .title {
            text-align: center;
            color: black;
            font-size: 30px;
        }

        .active1 {
            display: none;
        }

        #tabs {
            overflow: hidden;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #tabs li {
            float: left;
            margin: 0;
        }

        #tabs li a {
            position: relative;
            padding: 10px 50px;
            float: left;
            text-decoration: none;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
        }

        .ccc {
            background-color: black;
        }

        .ccc a {
            color: #fff;
        }

        .current a {
            outline: 0;
            z-index: 4;
        }

        .hoverItem a {
            background: black;
            color: #fff;
        }

        .tab {
            display: none;
        }

        .show {
            display: block;
        }

        .execution_banner {
            height: 200px;
            background-color: #f5f5f5;
            margin: 0 auto;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .form-check {
            display: inline-block;
        }

        #receipt {
            word-break: break-all;
        }

        #receipt_call {
            word-break: break-all;
        }

        .code {
            background-color: #f8f9fa;
            font-family: consolas, menlo, monaco, lucida console, liberation mono, dejavu sans mono, bitstream vera sans mono, courier new, monospace;
            overflow: auto;
            white-space: pre;
        }

        .errmsg {
            color: red;
        }

        .err {
            border-color: red;
        }

        .CodeMirror {border: 1px solid black; font-size:13px;border-radius: 5px}

        div#main-outer {
            width: 400px;
            margin: 5px;
            /*background: #DDD;*/
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="main-outer">
    <div class=logo-main></div>
    <div class=header></div>

    <div class=container>
        <ul id=tabs id=myTab role=tablist>
            <li class="current ccc">
                <a href=# title=tab1 data-i18n=contract/search></a>
            </li>
            <li>
                <a href=# title=tab2 data-i18n=contract/deploy></a>
            </li>
            <li>
                <a href=# title=tab3 data-i18n=contract/call></a>
            </li>
        </ul>
        <div id=content>
            <!-- search contract -->
            <div class="search_contract show tab" id=tab1>
                <div class=title>
                    <span data-i18n=contract/search_contract></span>
                </div>
                <input id=addr_input class=form-control data-i18n=contract/addr_input_msg>
                <span class="active1 errmsg" data-i18n=contract/err_msg_hash>Please enter a valid TX hash</span>
                <button class="search btn btn-block" data-i18n=contract/search></button>
                <div class="active1 code search_result"></div>
            </div>

            <div class="deploy_contract tab" id=tab2>
                <div class=title data-i18n=contract/deploy_contract></div>
                <!-- contract code -->

                <span data-i18n=contract/contract_code></span>
                <textarea class=form-control id=source  name=code cols=30 rows=10 data-validate-order-matters=required></textarea>

                <!-- select codetype -->
                <br>
                <div class=codetype>
                    <span data-i18n=contract/contract_codetype></span>
                    <div class=form-check>
                        <input class=form-check-input type=radio name=sourceType id=exampleRadios1 value=js checked>
                        <label class=form-check-label for=exampleRadios1>JavaScript</label>
                    </div>
                    <div class=form-check>
                        <input class=form-check-input type=radio name=sourceType id=exampleRadios2 value=ts>
                        <label class=form-check-label for=exampleRadios2>TypeScript</label>
                    </div>
                    <span data-i18n=contract/contract_codetype_banner></span>
                </div>

                <!-- function args -->
                <br>
                <label data-i18n=contract/contract_fun></label>
                <input class=form-control id=deploy_args>

                <!-- select wallet -->
                <div class="select-wallet-file mt14"></div>

                <div class="form-group row">
                    <div class=col>
                        <label data-i18n=send-nas/from-address></label>
                        <div class=icon-address data-id=from_addr data-disabled></div>
                    </div>
                    <div class=col>
                        <label data-i18n=send-nas/to-address></label>
                        <div class=icon-address data-id=to_addr data-disabled></div>
                    </div>
                </div>

                <div class="form-group row">
                    <div class=col>
                        <label data-i18n=send-nas/balance></label>
                        <input class=form-control disabled id=balance>
                    </div>
                    <div class=col>
                        <label data-i18n=send-nas/amount></label>
                        <input class=form-control type=text id=value value=0 disabled>
                    </div>
                </div>

                <div class="form-group row">
                    <div class=col>
                        <label data-i18n=gas-limit></label>
                        <div class=number-comma data-data-i18n=amount data-id=gas_limit data-validate="required number gt0" data-value=200000 data-disabled></div>
                    </div>
                    <div class=col>
                        <label data-i18n=gas-price></label>
                        <i>( 1 NAS = 1EWei = 10
                            <sup>18</sup> Wei )</i>
                        <div class=number-comma data-data-i18n=amount data-id=gas_price data-unit=wei data-validate="required number gt0" data-value=200000></div>
                    </div>
                </div>

                <div class="result active1" id=result></div>

                <div class="form-group row">
                    <div class=col>
                        <button id=deploy_test data-i18n=contract/deploy_test class=" btn btn-block"></button>
                    </div>
                    <div class=col>
                        <button class="btn btn-block" data-i18n=contract/deploy_submit disabled id=deploy></button>
                    </div>
                </div>

                <div class="active1 next row">
                    <div class=col-6>
                        <span class=execution data-i18n=contract/test_result></span>
                        <textarea class="execution_banner form-control" id=deploy_test_result></textarea>
                    </div>
                    <div class="active1 col-6 next_right">
                        <span class=execution data-i18n=contract/result></span>
                        <br>
                        <span data-i18n=contract/txhash></span>
                        <i data-i18n=contract/clickToCheck></i>&darr;
                        <a class="form-control mt14" id=receipt></a>
                        <span class=mt14 data-i18n=contract/contract_address></span>
                        <input type=text class="form-control mt14" id=deploy_result_address disabled>
                    </div>
                </div>
            </div>

            <div class="run_contract tab" id=tab3>
                <div class=title>
                    <span data-i18n=contract/call_contract></span>
                </div>

                <div class="form-group row">
                    <div class=col>
                        <label data-i18n=contract/contract_funtion></label>
                        <input class=form-control type=text id=call_function>
                    </div>
                    <div class=col>
                        <label data-i18n=contract/contract_fun></label>
                        <input class=form-control type=text id=call_args>
                    </div>
                </div>

                <div class=select-wallet-file></div>

                <div class="form-group row">
                    <div class=col>
                        <label data-i18n=send-nas/from-address></label>
                        <div class=icon-address data-id=run_from_addr data-disabled></div>
                    </div>
                    <div class=col>
                        <label data-i18n=send-nas/to-address></label>
                        <div class=icon-address data-id=run_to_addr></div>
                    </div>
                </div>

                <div class="form-group row">
                    <div class=col>
                        <label data-i18n=send-nas/balance></label>
                        <input class=form-control disabled id=run_balance>
                    </div>
                    <div class=col>
                        <label data-i18n=send-nas/amount></label>
                        <input class=form-control id=run_value value=0 data-validate-order-matters="required number">
                    </div>
                </div>

                <div class="form-group row">
                    <div class=col>
                        <label data-i18n=gas-limit></label>
                        <input class=form-control type=text id=run_gas_limit value=200000>
                    </div>
                    <div class=col>
                        <label data-i18n=gas-price></label>
                        <i>( 1 NAS = 1EWei = 10
                            <sup>18</sup> Wei )</i>
                        <input class=form-control type=text id=run_gas_price>
                    </div>
                </div>

                <div class="active1 result" id=result></div>

                <div class="form-group row">
                    <div class=col>
                        <button id=call_test data-i18n=contract/call_test class="btn btn-block"></button>
                    </div>
                    <div class=col>
                        <button class="btn btn-block" data-i18n=contract/call_submit disabled id=call></button>
                    </div>
                </div>

                <div class="active1 next row">
                    <div class=col-6>
                        <span class=execution data-i18n=contract/test_result></span>
                        <textarea class="execution_banner form-control" id=call_test_result></textarea>
                    </div>
                    <div class=col-6>
                        <span class=execution data-i18n=contract/result></span>
                        <br>
                        <span data-i18n=contract/txhash></span>
                        <i data-i18n=contract/clickToCheck></i>&darr;
                        <a class="form-control mt14" id=receipt_call></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="fade loading modal" data-backdrop=static>
        <div class=modal-dialog>
            <div class=modal-content>
                <div class=modal-body>
                    <div class=progress>
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role=progressbar style="width: 100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class=footer></div>

    <script src=lib/jquery-3.3.1.min.js></script>
    <script src=lib/bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js data-depends=jquery.slim></script>
    <script src=lib/bootbox.min.js data-depends="bootstrap jquery.slim"></script>
    <script src=lib/blockies.min.js></script>
    <script src=lib/js-beautify-1.7.5/beautify.js></script>
    <script src=lib/prismjs-1.13.0/prism.js></script>
    <script src=lib/nebulas.js></script>
    <script src=js/1-localSave.js></script>
    <script src=js/home.v1.js></script>
    <script src=js/i18n.js data-depends=jquery.slim></script>
    <script src=js/ui-block.js data-depends="bootbox blockies jquery.slim i18n.js nebulas.js"></script>
    <script src=lib/codemirror/codemirror.js></script>
    <script src=lib/codemirror/javascript.js></script>
    <script src=js/contract.js></script>
    </div>
</body>
</html>